<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Simulor - Responsive Admin Dashboard Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
        <meta content="Coderthemes" name="author" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <!-- App favicon -->
        <link rel="shortcut icon" href="assets/images/favicon.ico">

        <!-- Notification css (Toastr) -->
        <link href="css/vendor/toastr.min.css" rel="stylesheet" type="text/css" />

        <!-- App css -->
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="css/icons.min.css" rel="stylesheet" type="text/css" />
        <link href="css/app.min.css" rel="stylesheet" type="text/css" />

    </head>

    <body>

        <!-- Begin page -->
        <div id="wrapper">

            @@include('./partials/left-sidebar.html')

            <!-- ============================================================== -->
            <!-- Start Page Content here -->
            <!-- ============================================================== -->

            <div class="content-page">
                <div class="content">

                    @@include('./partials/topbar.html')

                    <!-- Start Content-->
                    <div class="container-fluid">
                        
                        <!-- start page title -->
                        <div class="row">
                            <div class="col-12">
                                <div class="page-title-box">
                                    <div class="page-title-right">
                                        <ol class="breadcrumb m-0">
                                            <li class="breadcrumb-item"><a href="#">Simulor</a></li>
                                            <li class="breadcrumb-item"><a href="#">Components</a></li>
                                            <li class="breadcrumb-item active">Alerts</li>
                                        </ol>
                                    </div>
                                    <h4 class="page-title">Alerts</h4>
                                </div>
                            </div>
                        </div>     
                        <!-- end page title --> 

                        <div class="row">
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="header-title mb-3">Default Alert</h4>

                                        <div class="alert alert-primary" role="alert">
                                            This is a <strong>primary</strong> alert—check it out!
                                        </div>
                                        <div class="alert alert-secondary" role="alert">
                                            This is a <strong>secondary</strong> alert—check it out!
                                        </div>
                                        <div class="alert alert-success" role="alert">
                                            This is a <strong>success</strong> alert—check it out!
                                        </div>
                                        <div class="alert alert-danger" role="alert">
                                            This is a <strong>danger</strong> alert—check it out!
                                        </div>
                                        <div class="alert alert-warning bg-warning text-white border-0" role="alert">
                                            This is a <strong>warning</strong> alert—check it out!
                                        </div>
                                        <div class="alert alert-info bg-info text-white border-0" role="alert">
                                            This is a <strong>info</strong> alert—check it out!
                                        </div>
                                        <div class="alert alert-light bg-light text-dark border-0" role="alert">
                                            This is a <strong>light</strong> alert—check it out!
                                        </div>
                                        <div class="alert alert-dark bg-dark text-white border-0 mb-0" role="alert">
                                            This is a <strong>dark</strong> alert—check it out!
                                        </div>
                                    </div> <!-- end card-body-->
                                </div> <!-- end card-->
                            </div> <!-- end col-->

                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="header-title mb-3">Dismissing Alerts</h4>

                                        <div class="alert alert-primary alert-dismissible bg-primary text-white border-0 fade show" role="alert">
                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                            This is a primary alert—check it out!
                                        </div>
                                        <div class="alert alert-secondary alert-dismissible bg-secondary text-white border-0 fade show" role="alert">
                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                            This is a secondary alert—check it out!
                                        </div>
                                        <div class="alert alert-success alert-dismissible bg-success text-white border-0 fade show" role="alert">
                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                            This is a success alert—check it out!
                                        </div>
                                        <div class="alert alert-danger alert-dismissible bg-danger text-white border-0 fade show" role="alert">
                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                            This is a danger alert—check it out!
                                        </div>
                                        <div class="alert alert-warning alert-dismissible fade show" role="alert">
                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                            This is a warning alert—check it out!
                                        </div>
                                        <div class="alert alert-info alert-dismissible fade show" role="alert">
                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                            This is a info alert—check it out!
                                        </div>
                                        <div class="alert alert-light alert-dismissible fade show" role="alert">
                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                            This is a light alert—check it out!
                                        </div>
                                        <div class="alert alert-dark alert-dismissible fade show mb-0" role="alert">
                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                            This is a dark alert—check it out!
                                        </div>
                                        
                                    </div> <!-- end card-body-->
                                </div> <!-- end card-->
                            </div> <!-- end col-->
                        </div>
                        <!-- end row -->


                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="header-title mb-3">Toastr Alerts</h4>
                                        <div class="row">
                                            <div class="col-xl-4 col-md-6">
                                                <div class="form-group">
                                                    <label>Title</label>
                                                    <input id="title" type="text" class="form-control" placeholder="Enter a title ..." />
                                                </div>

                                                <div class="form-group">
                                                    <label>Message</label>
                                                    <textarea class="form-control" id="message1" rows="3" placeholder="Enter a message ..."></textarea>
                                                </div>

                                                <div class="checkbox mb-1">
                                                    <input id="closeButton" type="checkbox" value="checked" class="input-mini" />
                                                    <label for="closeButton">
                                                        Close Button
                                                    </label>
                                                </div>

                                                <div class="checkbox mb-2">
                                                    <input id="addBehaviorOnToastClick" type="checkbox" value="checked" class="input-mini" />
                                                    <label for="addBehaviorOnToastClick">
                                                        Add behavior on toast click
                                                    </label>
                                                </div>

                                                <div class="checkbox mb-1">
                                                    <input id="debugInfo" type="checkbox" value="checked" class="input-mini" />
                                                    <label for="debugInfo">
                                                        Debug
                                                    </label>
                                                </div>

                                                <div class="checkbox mb-1">
                                                    <input id="progressBar" type="checkbox" value="checked" class="input-mini" />
                                                    <label for="progressBar">
                                                        Progress Bar
                                                    </label>
                                                </div>

                                                <div class="checkbox mb-1">
                                                    <input id="preventDuplicates" type="checkbox" value="checked" class="input-mini" />
                                                    <label for="preventDuplicates">
                                                        Prevent Duplicates
                                                    </label>
                                                </div>

                                                <div class="checkbox mb-1">
                                                    <input id="addClear" type="checkbox" value="checked" class="input-mini" />
                                                    <label for="addClear">
                                                        Add button to force clearing a toast, ignoring focus
                                                    </label>
                                                </div>

                                                <div class="checkbox mb-1">
                                                    <input id="newestOnTop" type="checkbox" value="checked" class="input-mini" />
                                                    <label for="newestOnTop">
                                                        Newest on top
                                                    </label>
                                                </div>
                                            </div>
    
                                            <div class="col-xl-2 col-md-6">
                                                <div class="control-group" id="toastTypeGroup">

                                                    <div class="controls">
                                                        <label class="mb-2">Toast Type</label>
                                                        <div class="radio radio-success mb-1">
                                                            <input type="radio" name="radio" id="radio1" value="success"
                                                                    checked>
                                                            <label for="radio1">
                                                                Success
                                                            </label>
                                                        </div>
    
                                                        <div class="radio radio-info mb-1">
                                                            <input type="radio" name="radio" id="radio2" value="info">
                                                            <label for="radio2">
                                                                Info
                                                            </label>
                                                        </div>
    
                                                        <div class="radio radio-warning mb-1">
                                                            <input type="radio" name="radio" id="radio3" value="warning">
                                                            <label for="radio3">
                                                                Warning
                                                            </label>
                                                        </div>
    
                                                        <div class="radio radio-danger mb-1">
                                                            <input type="radio" name="radio" id="radio4" value="error">
                                                            <label for="radio4">
                                                                Error
                                                            </label>
                                                        </div>
    
                                                    </div>
                                                </div>
                                                <div class="control-group" id="positionGroup">
                                                    <label class="mt-2 mb-2">Position</label>

                                                    <div class="radio mb-1">
                                                        <input type="radio" name="positions" id="radio5" value="toast-top-right" checked />
                                                        <label for="radio5">
                                                            Top Right
                                                        </label>
                                                    </div>

                                                    <div class="radio mb-1">
                                                        <input type="radio" name="positions" id="radio6" value="toast-bottom-right" />
                                                        <label for="radio6">
                                                            Bottom Right
                                                        </label>
                                                    </div>

                                                    <div class="radio mb-1">
                                                        <input type="radio" name="positions" id="radio7" value="toast-bottom-left" />
                                                        <label for="radio7">
                                                            Bottom Left
                                                        </label>
                                                    </div>

                                                    <div class="radio mb-1">
                                                        <input type="radio" name="positions" id="radio8" value="toast-top-left" />
                                                        <label for="radio8">
                                                            Top Left
                                                        </label>
                                                    </div>

                                                    <div class="radio mb-1">
                                                        <input type="radio" name="positions" id="radio9" value="toast-top-full-width" />
                                                        <label for="radio9">
                                                            Top Full Width
                                                        </label>
                                                    </div>

                                                    <div class="radio mb-1">
                                                        <input type="radio" name="positions" id="radio10" value="toast-bottom-full-width" />
                                                        <label for="radio10">
                                                            Bottom Full Width
                                                        </label>
                                                    </div>

                                                    <div class="radio mb-1">
                                                        <input type="radio" name="positions" id="radio11" value="toast-top-center" />
                                                        <label for="radio11">
                                                            Top Center
                                                        </label>
                                                    </div>

                                                    <div class="radio mb-1">
                                                        <input type="radio" name="positions" id="radio12" value="toast-bottom-center" />
                                                        <label for="radio12">
                                                            Bottom Center
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
    
                                            <div class="col-xl-3 col-md-6">

                                                <div class="form-group">
                                                    <label for="showEasing">Show Easing</label>
                                                    <input id="showEasing" type="text" placeholder="swing, linear" class="form-control" value="swing" />
                                                </div>

                                                <div class="form-group">
                                                    <label for="hideEasing">Hide Easing</label>
                                                    <input id="hideEasing" type="text" placeholder="swing, linear" class="form-control" value="linear" />
                                                </div>

                                                <div class="form-group">
                                                    <label for="showMethod">Show Method</label>
                                                    <input id="showMethod" type="text" placeholder="show, fadeIn, slideDown" class="form-control" value="fadeIn" />
                                                </div>

                                                <div class="form-group">
                                                    <label for="hideMethod">Hide Method</label>
                                                    <input id="hideMethod" type="text" placeholder="hide, fadeOut, slideUp" class="form-control" value="fadeOut" />
                                                </div>

                                            </div>
    
                                            <div class="col-xl-3 col-md-6">

                                                <div class="form-group">
                                                    <label for="showDuration">Show Duration</label>
                                                    <input id="showDuration" type="text" placeholder="ms" class="input-mini form-control" value="300" />
                                                </div>

                                                <div class="form-group">
                                                    <label for="hideDuration" class="m-t-10">Hide Duration</label>
                                                    <input id="hideDuration" type="text" placeholder="ms" class="input-mini form-control" value="1000" />
                                                </div>

                                                <div class="form-group">
                                                    <label for="timeOut" class="m-t-10">Time out</label>
                                                    <input id="timeOut" type="text" placeholder="ms" class="input-mini form-control" value="5000" />
                                                </div>

                                                <div class="form-group">
                                                    <label for="extendedTimeOut" class="m-t-10">Extended time out</label>
                                                    <input id="extendedTimeOut" type="text" placeholder="ms" class="input-mini form-control" value="1000" />
                                                </div>
                                                
                                            </div>
                                        </div><!-- end row -->
    
                                        <div class="row mt-3">
                                            <div class="col-md-12">
                                                <button type="button" class="btn btn-primary btn-sm" id="showtoast">Show Toast</button>
                                                <button type="button" class="btn btn-danger btn-sm" id="cleartoasts">Clear Toasts</button>
                                                <button type="button" class="btn btn-danger btn-sm" id="clearlasttoast">Clear Last Toast</button>
                                            </div>
                                        </div>
    
                                        <div class="row m-t-30">
                                            <div class="col-md-12">
                                                <pre id='toastrOptions' class="p-3 bg-light mt-3 mb-0"><h5 class="m-0">Example Code</h5></pre>
                                            </div>
                                        </div>
                                    </div> <!-- end card-body-->
                                </div> <!-- end card-->
                            </div><!-- end col -->
                        </div>
                        <!-- end row -->
                        
                    </div> <!-- container -->

                </div> <!-- content -->

                @@include('./partials/footer.html')

            </div>

            <!-- ============================================================== -->
            <!-- End Page content -->
            <!-- ============================================================== -->


        </div>
        <!-- END wrapper -->


        <!-- App js -->
        <script src="js/vendor.min.js"></script>
        <script src="js/app.min.js"></script>

        <!-- Toaster js -->
        <script src="js/vendor/toastr.min.js"></script>
        <script src="js/pages/toastr.init.js"></script>

    </body>
</html>